<script>
import  router  from '@/router'

export default {
    data() {
        return {
            lx: '',
            fw: '',
            dx: [],
            bt: '',
            nr: '',
        }
    },
    methods:{
        add(){
            router.push('/healthy/detailedNotice')
        }
    }
}

</script>

<template>
    <div class="box">
        <h1 class="header">发布通知</h1>
        <div class="content">
            <el-form-item class="title" label="通知类型 :">
                <el-select class="type" placeholder="选择通知类型" v-model="lx">
                    <el-option label="通知" value="1" />
                    <el-option label="公告" value="2" />
                    <el-option label="活动" value="3" />
                </el-select>
            </el-form-item>

            <el-form-item class="title" label="发布范围 :">
                <el-radio-group class="type" v-model="fw">
                    <el-radio label="全校" />
                    <el-radio label="全部班级" />
                    <el-radio label="全部教师" />
                </el-radio-group>
            </el-form-item>

            <el-form-item class="title" label="发布对象 :">
                <el-checkbox-group class="type" v-model="dx">
                    <el-checkbox label="老师" name="老师" />
                    <el-checkbox label="家长" name="家长" />
                    <el-checkbox label="学生" name="学生" />
                    <span>请至少选择一项</span>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item class="title" label="通知标题 :">
                <el-input class="type" v-model="bt" />
            </el-form-item>

            <el-form-item class="title" label="通知内容 :">
                <el-input class="type" :rows="2" type="textarea" v-model="nr" placeholder="请输入内容" />
            </el-form-item>

            <el-form-item class="title" label="">
                <el-button class="type" @click="add">提交</el-button>
            </el-form-item>
        </div>
    </div>
</template>
<style scoped lang="scss">
.header {
    margin-bottom: 16px;
}

.title {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}

.type {
    margin-left: 15px;
}

.box {
    background-color: #fff;
    height: 500px;
    width: 100%;
    margin: 0 auto;
    padding-left: 50px;
}

.content {
    margin: 50px 170px;
}
</style>